<template>
	<!-- 用户信息修改 -->
	<view class="person-mes-box">
		<view class="zh-layout-view-top" :style="{'height':setbackheight()}">
			<uni-nav-bar title="基本信息" backgroundColor="transparent" color="#000" statusBar="true" @clickLeft="back()"
				left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="record-add-view">
			<!-- 查看认证信息 -->
			<view class="add-view-item x">
				<view class="add-image" style="overflow: hidden;">
					<u-upload class="hasvalueinput" @afterRead="afterRead1" @delete="deletePic1" name="1" multiple
						:maxCount="1">
						<view style="display: flex;">
							<image style="width: 100rpx;" class="add-view-item-img" :src="personmes.avatar"
								mode="widthFix"></image>
						</view>
					</u-upload>
				</view>
				<button class="add-view-item-btn" type="default" @click="$refs.alertDialog.open()">查看认证信息</button>
			</view>
			<!-- 用户名 -->
			<view class="add-view-item">
				<view class="add-image" style="	background: linear-gradient(180deg, #57DED9 0%, #2291FF 100%);">
					<image class="add-view-item-img" src="@/static/person-mes/idcard-w.png" mode="heightFix"></image>
				</view>
				<view class="add-view-item-value">
					<text style="margin: 32rpx;min-width: 30rpx">用户名称</text>
					<input type="text" class="hasvalueinput" placeholder-class="nohasvalueinput"
						v-model="personmes.nickName" />
				</view>
				<uni-icons type="arrowdown" color="rgba(255, 255, 255, 1)"></uni-icons>
			</view>
			<!-- 性别 -->
			<view class="add-view-item">
				<view class="add-image" style="background: linear-gradient(180deg, #C4B2FF 0%, #2291FF 100%);">
					<image class="add-view-item-img" src="@/static/person-mes/gender-w.png" mode="heightFix"></image>
				</view>
			
				<picker @change="selectgender" range-key="name" :range="genderlist">
					<view class="picker-css">
						<text style="margin: 32rpx;min-width: 30rpx">性别</text>
						<view v-if="personmes.sex=='0'" class="add-view-item-value" style="color: #000000;">女</view>
						<view v-if="personmes.sex=='1'" class="add-view-item-value" style="color: #000000;">男</view>
						<view v-if="personmes.sex=='2'" class="add-view-item-value" style="color: #000000;">保密</view>
					</view>
				</picker>
				<uni-icons class="icon-pos" type="arrowdown" color="#cccccc"></uni-icons>
			</view>
			<!-- 性别 -->
			<!-- 			<view class="add-view-item">
				<view class="add-image" style="background: linear-gradient(180deg, #C4B2FF 0%, #2291FF 100%);">
					<image class="add-view-item-img" src="@/static/person-mes/gender-w.png" mode="heightFix"></image>
				</view>

				<picker @change="selectgender" range-key="name" :range="genderlist">
					<view class="picker-css">
						<text style="margin: 0 76rpx 0 18rpx;width: 150rpx;">性别</text>
						<view v-if="personmes.sex==0" class="add-view-item-value" style="color: #000000;">女</view>
						<view v-if="personmes.sex==1" class="add-view-item-value" style="color: #000000;">男</view>
						<view v-if="personmes.sex==2" class="add-view-item-value" style="color: #000000;"></view>
					</view>
				</picker>
				<uni-icons class="icon-pos" type="arrowdown" color="#cccccc"></uni-icons>
			</view> -->
			<!-- 生日 -->
			<!-- 			<view class="add-view-item">
				<view class="add-image" style="background: linear-gradient(180deg, #FFB1B1 0%, #FF5555 100%);">
					<image class="add-view-item-img" src="@/static/person-mes/birthday-w.png" mode="heightFix"></image>
				</view>
				<picker @change="bindDateChangebirthday" mode="date" :value="personmes.birthday">
					<view class="picker-css">
						<text style="margin: 0 76rpx 0 18rpx;width: 150rpx;">生日</text>
						<view class="add-view-item-value"
							:style="{'color':personmes.birthday==='请选择生日'?'#959595':'#000000'}">{{personmes.birthday}}
						</view>
					</view>
				</picker>
				<uni-icons class="icon-pos" type="arrowdown" color="#cccccc"></uni-icons>
			</view> -->
			<!-- 手机号 -->
			<!-- <view class="add-view-item">
				<view class="add-image" style="background: linear-gradient(180deg, #FFD76E 0%, #FF9300 100%);">
					<image class="add-view-item-img" src="@/static/person-mes/phone-w.png" mode="heightFix"></image>
				</view>

				<view class="add-view-item-value">
					<text style="margin-right: 14rpx;">手机号码</text>
					<uni-easyinput :inputBorder="false" type="number" v-model="personmes.phoneNumber" placeholder=""
						maxlength='11' />
				</view>
				<uni-icons type="arrowdown" color="rgba(255, 255, 255, 1)"></uni-icons>
			</view> -->
			<!-- 微信 -->
			<!-- 			<view class="add-view-item">
				<view class="add-image" style="background: linear-gradient(180deg, #00FFC5 0%, #00969B 100%);">
					<image class="add-view-item-img" src="@/static/person-mes/wechat-w.png" mode="heightFix"></image>
				</view>

				<view class="add-view-item-value">
					<text style="margin-right: 86rpx;">微信</text>
					<input type="text" class="hasvalueinput" placeholder-class="nohasvalueinput"
						v-model="personmes.wechat" />
				</view>
				<uni-icons type="arrowdown" color="rgba(255, 255, 255, 1)"></uni-icons>
			</view> -->
			<!-- 邮箱 -->
			<view class="add-view-item">
				<view class="add-image" style="background: linear-gradient(180deg, #D3D8FF 0%, #8699FF 100%);">
					<image class="add-view-item-img" src="@/static/person-mes/email-w.png" mode="heightFix"></image>
				</view>

				<view class="add-view-item-value">
					<text style="margin: 32rpx;min-width: 30rpx">邮箱</text>
					<input type="text" class="hasvalueinput" placeholder-class="nohasvalueinput"
						v-model="personmes.email" />
				</view>
				<uni-icons type="arrowdown" color="rgba(255, 255, 255, 1)"></uni-icons>
			</view>
			<!-- 地址 -->
			<view class="add-view-item">
				<view class="add-image" style="background: linear-gradient(180deg, #D3D8FF 0%, #8699FF 100%);">
					<image class="add-view-item-img" src="@/static/person-mes/dz.png" mode="heightFix"></image>
				</view>

				<view class="add-view-item-value">
					<text style="margin: 32rpx;min-width: 30rpx">地址</text>
					<input type="text" class="hasvalueinput" placeholder-class="nohasvalueinput"
						v-model="personmes.address" />
				</view>
				<uni-icons type="arrowdown" color="rgba(255, 255, 255, 1)"></uni-icons>
			</view>
			<!-- 邀请码 需要获取主体的邀请码 需要增加判断 -->
			<view class="add-view-item disable" v-if='inviteCode'>
				<view class="add-image" style="background: linear-gradient(180deg, #D3D8FF 0%, #8699FF 100%);">
					<image class="add-view-item-img" src="@/static/person-mes/email-w.png" mode="heightFix"></image>
				</view>

				<view class="add-view-item-value">
					<text style="margin: 32rpx;min-width: 30rpx">邀请码</text>
					<input type="text" class="hasvalueinput" placeholder-class="nohasvalueinput"
						v-model="inviteCode" disabled />
				</view>
				<!-- <uni-icons type="arrowdown" color="rgba(255, 255, 255, 1)"></uni-icons> -->
				<button class="btn" @click="getInviitationCode">重置邀请码</button>
			</view>
			<view class="submit">
				<button @click="recordaddmet()" class="submit-btn">
					<image style="width: 30rpx;" class="icon-submit" src="@/static/wisdom-fishery/common/commit.png"
						mode="widthFix"></image>
					<text>提交</text>
				</button>


			</view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" cancelText="关闭" confirmText="重新获取" title="重新获取" content="确认重新获取邀请码"
					placeholder="" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="'info'" cancelText="取消" confirmText="确认" :title="'认证信息'" :before-close="true"
					@confirm="$refs.alertDialog.close()" @close="() =>{$refs.alertDialog.close()}">
					<view slot="default" class="report-progress">
						<!-- <view>认证信息</view> -->
						<view class="massge-content">
							<view v-for="(item, index) in InformationList[personmes.registerType || aaccountInformationIndex]"
								:key="index" class="massge-content-item">
								<view class="massge-content-item-name"> {{ item.name }}：</view>
								<text selectable> {{ personmes[item.value] || '--' }} </text>
							</view>
						</view>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template> 

<script>
	import UserApi from '@/api/socialized-servce/login/index.js'
		import Api from "@/api/socialized-servce/person-message/entry-management.js";
	import {agrServiceUrl} from '@/config/baseUrl.js'
	export default {
		data() {
			return {
				personmes: {
					nickName: '', //用户名称
					phoneNumber: '', // 手机号
					sex: 2, // 性别
					wechat: '', // 微信
					// address: '', // 地址
					birthday: '请选择生日', // 生日
					email: '' // 邮箱
				},
				genderlist: [{
					name: '女',
					value: '0'
				}, {
					name: '男',
					value: '1'
				}, {
					name: '',
					value: '2'
				}],
				genderindex: 0,
				fileList1: [],
				aaccountInformationIndex: 0,
				inviteCode: '',
				InformationList: [
					[{
						name: '姓名',
						value: 'documentName'
					}, {
						name: '身份证',
						value: 'documnetNumber'
					}],
					[{
						name: '企业名称',
						value: 'companyName'
					}, {
						name: '统一社会信息用代码',
						value: 'companyCode'
					}, {
						name: '法人姓名',
						value: 'documentName'
					}, {
						name: '法人身份证号',
						value: 'documnetNumber'
					}]
				],
			}
		},
		onLoad(e) {
			for (let key in e) {
				e[key] == 'null' && (e[key] = '')
			}
			this.personmes = e
		},
		onShow() {
			this.getpersonmessage()
		},
		methods: {
			// 获取当前用户信息
			getpersonmessage() {
				Api.queryByUserNo({
					userNo: uni.getStorageSync('userNo')
				}).then(res => {
					if (res.code == 200) {
						for (let key in res.data) {
							!res.data[key] && (res.data[key] = '')
						}
						this.personmes = res.data
						console.log(this.personmes)
						this.queryOrganizationByNo()
					}
				})
			},
			// 获取当前是否有邀请码
			queryOrganizationByNo() {
				UserApi.queryOrganizationByNo({
					no: uni.getStorageSync('organizationNo'),
					status: 1
				}).then(res => {
					if (res.code == 200) {
						if (uni.getStorageSync('userNo') === res.data.manageUserNo && uni.getStorageSync('userNo')) {
							this.inviteCode = res.data.inviteCode
						} else {
							this.inviteCode = ''
						}
					}
				})
			},
			// 提交方法
			recordaddmet() {
				for (let key in this.personmes) {
					!this.personmes[key] && (this.personmes[key] = null)
				}
				let params = {
					...this.personmes,
					// 必带参数
					// userId: this.personmes.userId,
					// 其他参数
					sex: this.personmes.sex,
					// 用户名
					nickName: this.personmes.nickName,
					// 手机号
					// phoneNumber: this.personmes.phoneNumber,
					// 微信
					// wechat: this.personmes.wechat,
					// 生日
					// birthday: this.personmes.birthday,
					// 邮箱
					email: this.personmes.email
				}
				console.log(params);
				const reg_wechat = /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/;
				const reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if (parseInt(params.sex) == NaN) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
				// } 
				// else if (!params.birthday || params.birthday == 'null') {
				// 	uni.showToast({
				// 		title: '请选择生日',
				// 		icon: 'none'
				// 	})
				// } else if (!params.phoneNumber || !/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test(params
				// 		.phoneNumber)) {
				// 	uni.showToast({
				// 		title: '手机号格式不对',
				// 		icon: 'none'
				// 	})
				// } else if (params.wechat && !reg_wechat.test(params.wechat)) {
				// 	uni.showToast({
				// 		title: '微信号格式不对',
				// 		icon: 'none'
				// 	})
				} else if (params.email && !reg_email.test(params.email)) {
					uni.showToast({
						title: '邮箱格式不对',
						icon: 'none'
					})
				} else {
					UserApi.edit(params).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 100)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})

				}

			},
			// 选择性别
			selectgender(e) {
				this.genderindex = e.detail.value
				// this.personmes.sex = this.genderlist[this.genderindex].value
				this.$set(this.personmes, 'sex', this.genderlist[this.genderindex].value)
			},
			// ---产出时间选择---
			bindDateChangebirthday(e) {
				this.personmes.birthday = e.detail.value
			},
			getInviitationCode() {
				this.$refs.inputDialog.open();
			},
			dialogInputConfirm(val) {
				// let username = uni.getStorageSync('username');
				// let url = `socialized/system/member/resetInviteCode`;
				UserApi.resetInviteCode({
					organizationNo: this.personmes.organizationNo || uni.getStorageSync('organizationNo')
				}).then(res => {
					if (res.code === 200) {
						// this.$set(this.personmes, 'inviteCode')
						// this.inviteCode = 
						this.queryOrganizationByNo()
						uni.showToast({
							title: '获取成功',
							icon: 'loading'
						});
					} else {
						uni.showToast({
							title: res.msg || '获取失败',
							icon: 'none'
						});
					}
				});
			},
			async afterRead1(event) {
				this.type = 'image1'
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				// for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[0].url)
					this.personmes.avatar = agrServiceUrl + result.slice(1)
					// console.log(this.personmes.avatar, 'ww');
					this.recordaddmet()
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: agrServiceUrl +
							`common/file/upDown/getUploadUrl?moduleType=XG_ORGANIZATION&upDownType=FTP`,
						filePath: url,
						name: 'file',
						header: {
							'token': uni.getStorageSync("satoken") || ''
						},
						formData: {},
						success: async (res) => {
							const dataObj = JSON.parse(res.data);
							const data = dataObj.data;
							console.log(data, 'ww');
							resolve(data);
						},
						fail: () => {
							uni.showToast({
								title: '图片上传失败',
								icon: 'error'
							})
						}
					});
				})
			},
			deletePic1(event) {
				this.fileList.splice(event.index, 1)
				this.formData.imgList.splice(event.index, 1)
			},
			// 设置背景高度
			setbackheight() {
				let topheightone = uni.upx2px(160)
				let newheight = this.customBar + topheightone + 40 + 'px'
				return newheight
			},
			// //--------顶部导航栏方法-----
			// //退出系统
			// loginout() {
			// 	// #ifdef APP-PLUS
			// 	plus.runtime.quit()
			// 	// #endif
			// 	// #ifndef APP-PLUS
			// 	uni.navigateTo({
			// 		url: '../login/login'
			// 	})
			// 	// #endif
			// },
			//返回上一步
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-pos {
		margin-right: 20rpx;
	}

	uni-picker {
		width: 78%;
	}

	.person-mes-box {
		width: 100%;
		position: relative;
		height: 100%;
	}

	.zh-layout-view-top {
		width: 100%;
		height: 200px !important;
		background: linear-gradient(141deg, #88ACFF 0%, #2165FF 100%) !important;
		position: relative;
		z-index: 0;
	}

	.picker-css {
		width: 70%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		    white-space: nowrap;
	}

	.record-add-view {
		width: 100%;
		height: calc(100% - 200rpx);
		margin-top: 232rpx;
		position: absolute;
		z-index: 1;
		top: 0;
		padding: 0 20rpx;
		box-sizing: border-box;

		.add-view-item {
			margin: 26rpx auto;
			width: 100%;
			min-height: 90rpx;
			box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			color: #959595;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			// justify-content: space-between;
			    justify-content: flex-start;
			background-color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			box-sizing: border-box;

			&.disable {
				background: #E6ECF1;
			}

			&:first-child {
				margin-top: 0;
			}

			&.x {
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				position: relative;

				// height: 120rpx;
				.add-image {
					margin: 60rpx auto;
					background: #424A60;
					border: 6rpx solid #5C8EFF;
					position: absolute;
					top: -120rpx;
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
				}
			}

			.add-view-item-btn {
				background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);
				border-radius: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				padding: 10rpx 20rpx;
				margin-top: 60rpx;
			}

			.btn {
				// width: 158rpx;
				height: 58rpx;
				background: #E6ECF1;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				border: 2rpx solid #286AFF;
				color: #286AFF;
				font-size: 24rpx;
				line-height: 58rpx;
				white-space: nowrap;
				padding-left: 24rpx;
			}

			.add-image {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				margin-left: 22rpx;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;
			}

			.add-view-item-img {
				// width: 30rpx;
				height: 26rpx;
				// borderradius: 50%;
			}

			.add-view-item-value {
				width: 520rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				white-space: nowrap;

				.hasvalueinput {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #000000;
				}

				.nohasvalueinput {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #959595;
				}
			}
		}
	}

	.submit {
		position: absolute;
		bottom: 250rpx;
		left: 50%;
		transform: translateX(-50%);

		.submit-btn {
			width: 340rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: linear-gradient(139deg, #57DED9 0%, #0480FB 100%);
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon-submit {
				margin-right: 10rpx;
			}
		}
	}

	::v-deep .zh-layout-view-top {
		// height:  !important;

		.uni-navbar {
			height: auto;

			.uni-navbar__content {
				height: auto !important;
			}
		}
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 28rpx;
	}
	.massge-content-item {
		white-space: nowrap;
		display: flex;
		padding: 10rpx 0;
	}
</style>